/*
 * @Date: 2024-03-25 14:56:55
 * @LastEditors: lyx
 * @LastEditTime: 2024-08-29 13:38:17
 * @FilePath: \taro-template3\src\packageA\components\ChatTable\index.tsx
 * @Description:
 */
import React, { useRef, useMemo, useState, useContext } from "react";
import { exportExcel } from "./export";
import { Image, Empty } from "@nutui/nutui-react";
import DetailModal from "./modal";
import "./index.less";
import excelIcon from "@/assets/images/excel_icon.png";
import { IconFont } from "@nutui/icons-react";
import { useTranslation } from "react-i18next";

interface IProps {
  chatInfo: {
    msgId: string;
    dataId: string;
  };
  tableData: any;
  onRender?: (isForce?: boolean) => void;
  imgUrl?: string;
}
const ChatTable: React.FC<IProps> = ({
  chatInfo,
  tableData,
  onRender,
  imgUrl,
}) => {
  const [open, setOpen] = React.useState<boolean>(false);
  const imgBlockRef = useRef<HTMLDivElement>(null);
  const imgRef = useRef<HTMLImageElement>(null);
  const { t } = useTranslation();
  const hasData = useMemo(() => {
    return Object.keys(tableData).length > 0;
  }, [tableData]);
  const downTable = () => {
    exportExcel(tableData.data, tableData.title || "table", t);
  };
  const onResize = (naturalWidth: number, naturalHeight: number) => {
    const domWidth = imgBlockRef.current?.clientWidth || 0;
    const maxHeight = 750;
    const radio = naturalWidth > domWidth ? 0.8 : 1;
    const radioWidth = naturalWidth * radio;
    const radioHeight = naturalHeight * radio;
    if (imgBlockRef.current) {
      imgBlockRef.current.style.height = `${radioHeight > maxHeight ? maxHeight : radioHeight + 10}px`;
    }
    if (imgRef.current) {
      imgRef.current.style.width = `${radioWidth}px`;
      imgRef.current.style.height = `${radioHeight}px`;
    }
  };

  return (
    <>
      <div className="chat-luckysheet-table">
        {hasData && (
          <div className="table-head">
            <div className="info-area">
              <div></div>
              <div className="info-text">
                <div className="info-title">{tableData.title || ""}</div>
              </div>
            </div>
            <div className="btn-area"></div>
          </div>
        )}
        {hasData ? (
          <div className="table-body-icon">
            <IconFont name={excelIcon} size="2rem" />
          </div>
        ) : (
          <Empty status="empty" title="暂无报表数据，请重新问询" />
        )}
      </div>
      <DetailModal
        open={open}
        chatInfo={chatInfo}
        tableData={tableData}
        onCancel={() => setOpen(false)}
      ></DetailModal>
    </>
  );
};

export default ChatTable;
